<template>
  <el-dialog :title="$t('label_print_config')" :visible.sync="visible" custom-class="dialog_big">
    <div>
      <div>
        <ex_header_spiler :title="$t('label_business_template')" />
        <ex_super_table :specialStyle="false" :data="printConfig.template" :model="templateTableModel" :height="300" />
        <el-alert :title="$t('label_business_template_print_config_tip')" type="warning" :closable="false">
        </el-alert>
        <template v-if="!_.isEmpty(printConfig.OUTBOUND_WAYBILL) && (!printType || printType == 'OUTBOUND_WAYBILL')">
          <ex_header_spiler :title="$t('label_three_party_outbound_face_order')" />
          <ex_super_table :specialStyle="false" :data="printConfig.OUTBOUND_WAYBILL" :model="outboundFaceTableModel"
            :height="300" />
          <el-alert :title="$t('three_party_outbound_face_order_print_config_tip')" type="warning" :closable="false">
          </el-alert>
        </template>

      </div>
      <span slot="footer" class="dialog-footer">
      </span>
      <div slot="footer" class="dialog_button_footer">
        <el-button type="primary" @click="saveConfig">
          {{ $t('label_save') }}
        </el-button>
        <el-button @click="visible = false">{{ $t('label_close') }}</el-button>

      </div>
    </div>
  </el-dialog>

</template>

<script>
import business_function from "@/common/business_function";

import common_select_print_template from "./common_select_print_template.vue"
import common_select_print_client from "./common_select_print_client.vue"
export default {
  components: { common_select_print_template, common_select_print_client, },
  props: {
    printType: null,
  },
  data() {
    return {
      visible: false,
      printConfig: {
        template: [],
        thirdFaceOrder: [],
      },

      templateTableModel: [
        {
          key: 'key',
          label: 'label_business_type', width: 140,
          formatter: (r, c, v, i) => this.$enumShow(v, "PrintBussinessTypeEnum"),
        },


        {
          key: 'printerName',
          label: 'label_printer', "min-width": 200,
          render: (h, { row, column }) => {
            const printerName = row['printerName']
            const clientId = row['clientId']
            return h(common_select_print_client, {
              class: "w_fill",
              props: {
                clearable: true,
                printerName: printerName,
                clientId: clientId,
              },
              on: {
                'update:printerName': (e) => this.$set(row, 'printerName', e),
                'update:clientId': (e) => this.$set(row, 'clientId', e),
              }
            })
          }
        },
        {
          key: 'templateId',
          label: 'label_print_template', "min-width": 200,
          render: (h, { row, column }) => {
            const value = row[column.property]
            return h(common_select_print_template, {
              class: "w_fill",
              props: {
                value: value, clearable: true,
                businessType: row.key,
              },
              on: {
                input: (e) => this.$set(row, column.property, e)
              }
            })
          }
        },
      ],
      outboundFaceTableModel: [
        {
          key: 'key',
          label: 'label_face_track_source', width: 140,
          formatter: (r, c, v, i) => this.$enumShow(v, "OmsOutboundOrderEcPlatformEnum"),
        },


        {
          key: 'printerName',
          label: 'label_printer', "min-width": 200,
          renderHeader: (h, { column }) => {
            return (<div>
              {this.$t(column.label)}
              <el-button type="primary" class="mg_l1" onClick={this.syncOutboundWaybill}>{this.$t("label_sync")} - {this.$enumShow("OUTBOUND_WAYBILL", 'PrintBussinessTypeEnum')}</el-button>
            </div>)
          },
          render: (h, { row, column }) => {
            const printerName = row['printerName']
            const clientId = row['clientId']
            return h(common_select_print_client, {
              class: "w_fill",
              props: {
                clearable: true,
                printerName: printerName,
                clientId: clientId,
              },
              on: {
                'update:printerName': (e) => this.$set(row, 'printerName', e),
                'update:clientId': (e) => this.$set(row, 'clientId', e),
              }
            })
          }
        },
        {
          key: 'templateId',
          label: 'label_print_template', "min-width": 250,
          render: (h, { row, column }) => {
            const value = row[column.property]
            const template_select = h(common_select_print_template, {
              class: "flex_cell mg_l2",
              props: {
                value: value, clearable: true,
                businessType: "OUTBOUND_WAYBILL",
              },
              on: {
                input: (e) => this.$set(row, column.property, e)
              }
            })
            return (<div class="flex_row_center">
              <el-checkbox value={row.tempPt} disabled={row.tempForce} onInput={e => this.$set(row, 'tempPt', e)}>{this.$t('label_same_time_print_self_draw_face_track')}</el-checkbox>
              {row.tempPt ? template_select : null}
            </div>)
          }
        },
      ],
    }
  },
  methods: {
    loadPrintConfig(parmas) {
      return business_function.loadPrintConfig(parmas)
    },
    show() {

      this.visible = true


      let localConfig = business_function.loadPrintConfig({ typeAll: true })

      const templateBaseItems = localConfig.filter(it => (!this.printType || (it.key == this.printType)) && !it.linkKey)

      const OUTBOUND_WAYBILL_Items = localConfig.filter(it => (!this.printType || (it.linkKey == this.printType)) && it.linkKey == "OUTBOUND_WAYBILL")

      let config = {
        template: templateBaseItems,
        OUTBOUND_WAYBILL: OUTBOUND_WAYBILL_Items,
      }

      this.printConfig = config
    },
    syncOutboundWaybill() {
      const item = _.find(this.printConfig.template, it => it.key == "OUTBOUND_WAYBILL")
      if (item) {
        this.printConfig.OUTBOUND_WAYBILL.forEach(it => {
          this.$set(it, 'clientId', item.clientId)
          this.$set(it, 'printerName', item.printerName)
        })
      }
    },
    saveConfig() {
      const saveData = _.unionBy(
        this.printConfig.template,
        this.printConfig.OUTBOUND_WAYBILL.map(it => {
          it.templateId = it.tempPt ? it.templateId : null
          return it
        }),
        'key')
      business_function.savePrintConfig({
        data: saveData
      })
      this.$emit('saveConfig', saveData)
      this.visible = false
    },
  },

}
</script>
